<template>
  <view :class="classNameList" :style="{'color': color}">
    <slot />
  </view>
</template>

<script>
export default {
  name: 'XPlaceholder',
  components: {},
  props: {
    size: {
      type: String,
      default: 'medium'
    },
    color: {
      type: String,
      default: '#777'
    }
  },
  data() {
    return {};
  },
  computed: {
    // class列表
    classNameList() {
      const name = ['x-placeholder'];
      name.push(`is-${this.size}`);
      return name.join(' ');
    }
  },
  watch: {},
  created() {

  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="scss">
  .x-placeholder{
    // 大号
    &.is-large{
      height: $uni-height-size-lg; line-height: $uni-height-size-lg; font-size: $uni-font-size-lg;
    }
    // 中号
    &.is-medium{
      height: $uni-height-size-base; line-height: $uni-height-size-base; font-size: $uni-font-size-base;
    }
    // 小号
    &.is-small{
      height: $uni-height-size-sm; line-height: $uni-height-size-sm; font-size: $uni-font-size-sm;
      font-size: $uni-font-size-base;
    }
  }
</style>
